<template>
  <div class="manage">
    <div style="padding-bottom:50px">
      <!-- 搜索 -->
      <div class="shadow">
        <div class="search flex">
          <div class="searchMain flex-1 flex">
            <!-- <img class="search_icon" src="/static/images/manage/search_icon.png" alt /> -->
            <van-search class="flex-1" @search="search" @clear="cancel" placeholder="搜索产品名称、编号" />
            <!-- <input type="text" placeholder="搜索产品名称、编号" /> -->
          </div>
          <div
            style="width:50px;height:50px;text-align:center;line-height:50px"
            @click="screenType=!screenType"
          >
            <img class="right_icon" src="/static/images/manage/screen.png" />
          </div>
        </div>
      </div>
      <!-- 筛选 -->
      <div class="screen" v-if="screenType" @click="screenType=false">
        <div class="show">
          <div style="max-height:344px;overflow: auto;width:100%">
            <div v-if="userInfo&&userInfo.identity==='FINANCIAL'">
              <p class="weight" style="padding:15px 12px 15px 15px;">类型</p>
              <div class="flex type">
                <div
                  class="typeItem"
                  @click.stop="(show1.index=index),(show1.classifyId=item.id)"
                  :class="show1.index===index?'showColor':'showColor1'"
                  v-for="(item,index) in showList1"
                  :key="index"
                >{{item.classifyName}}</div>
              </div>
            </div>
            <div>
              <p class="weight" style="padding:5px 12px 15px 15px;">期限</p>
              <div class="flex type">
                <div
                  class="typeItem"
                  @click.stop="(show2.index=index),(show2.raisingPeriod=item==='全部'?'':item)"
                  :class="show2.index===index?'showColor':'showColor1'"
                  v-for="(item,index) in showList2"
                  :key="index"
                >{{item}}</div>
              </div>
            </div>
            <div>
              <p class="weight" style="padding:5px 12px 15px 15px;">起投</p>
              <div class="flex type">
                <div
                  class="typeItem"
                  @click.stop="(show3.index=index),(show3.startingAmount=item==='全部'?'':item)"
                  :class="show3.index===index?'showColor':'showColor1'"
                  v-for="(item,index) in showList3"
                  :key="index"
                >{{item}}</div>
              </div>
            </div>
            <div v-if="userInfo&&userInfo.identity==='FINANCIAL'">
              <p class="weight" style="padding:5px 12px 15px 15px;">状态</p>
              <div class="flex type">
                <div
                  class="typeItem"
                  @click.stop="(show4.index=index),(show4.auditStatus=item.auditStatus)"
                  :class="show4.index===index?'showColor':'showColor1'"
                  v-for="(item,index) in showList4"
                  :key="index"
                >{{item.name}}</div>
              </div>
            </div>
          </div>
          <div class="flex btm">
            <div class="again flex-1" @click.stop="jumpAgain">重置</div>
            <div class="sucess flex-1" @click.stop="jumpSucess">确定</div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="content" v-if="list.length>0">
        <div class="mainBody" v-for="item in list" :key="item" @click="handleJump(item)">
          <div class="flex align-center">
            <div class="icon">
              <!-- REMOVE_RACK.已下架,IN_COLLECTION.回款中,COMPLETE.已完成,RAISING.募集中	 -->
              <span>{{item.auditStatus==='REMOVE_RACK'?'已下架':item.auditStatus==='IN_COLLECTION'?"回款中":item.auditStatus==='COMPLETE'?"已完成":"募集中"}}</span>
            </div>
            <span style="color:#909292;font-size:12px">（{{item.productNo}}）</span>
          </div>
          <div class="flex">
            <div style="width:60%">
              <div class="name ellipsis">{{item.name}}</div>
              <div class="flex ellipsis">
                <p class="label">{{item.classifyName}}</p>
                <p class="label">{{item.startingAmount}}万元起投</p>
              </div>
            </div>
            <div class="right">
              <div class="percent" v-if="item.baseComparison.length===1">
                <span v-if="item.baseComparison[0].prop==='0'">浮动</span>
                <span v-else>{{item.baseComparison[0].prop}}%</span>
              </div>
              <div class="percent" v-if="item.baseComparison.length>1">
                <span
                  v-if="item.baseComparison[0].prop==='0' && item.baseComparison[item.baseComparison.length-1].prop==='0'"
                >浮动</span>
                <span
                  v-else
                >{{item.baseComparison[0].prop}}%~{{item.baseComparison[item.baseComparison.length-1].prop}}%</span>
              </div>
              <div class="month" v-if="item.raisingPeriod">{{item.raisingPeriod}}个月</div>
            </div>
          </div>
        </div>
        <div>
          <div class="activeMore" v-if="!loadMore && list.length>0">—— 已经到底啦 ——</div>
        </div>
      </div>
      <!-- 无数据 -->
      <div class="empty" v-else>
        <div style="text-align:center">
          <img class="emptyIcon" src="/static/images/manage/empty.png" alt />
          <p style="font-size:14px;color:#909292">新产品即将上线，敬请期待</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  productClassifyAll,
  allLimit,
  allStarting,
  customerPages
} from "@/api/api";
export default {
  props: {},
  data() {
    return {
      list: [],
      showList1: [{ classifyName: "全部", id: "" }],
      showList2: ["全部"],
      showList3: ["全部"],
      userInfo: null,
      showList4: [
        { name: "全部", auditStatus: "" },
        { name: "募集中", auditStatus: "RAISING" },
        { name: "回款中", auditStatus: "IN_COLLECTION" },
        { name: "已完成", auditStatus: "COMPLETE" },
        { name: "已下架", auditStatus: "REMOVE_RACK" }
      ],
      // 列表分页
      formData: {
        pageIndex: 1,
        pageSize: 10,
        realId: ""
      },
      phone: null,
      customerName: null,
      loadMore: true,
      screenType: false,
      show1: {
        index: 0,
        classifyId: ""
      },
      show2: {
        index: 0,
        raisingPeriod: ""
      },
      show3: {
        index: 0,
        startingAmount: ""
      },
      show4: {
        index: 0,
        auditStatus: ""
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  onShow() {
    // this.info();
  },
  // 上拉加载更多
  onReachBottom() {
    this.customerPages();
  },
  created() {},
  mounted() {
    Object.assign(this.$data, this.$options.data());
    console.log(this.$mp.query, "this.$mp.querythis.$mp.querythis.$mp.query");
    this.phone = this.$mp.query.phone;
    this.customerName = this.$mp.query.customerName;
    this.list = [];
    this.formData = {
      pageIndex: 1,
      pageSize: 10,
      realId: this.$mp.query.realId
    };
    console.log(this.formData, "ttttttt");
    this.loadMore = true;
    this.info();
    // this.customerId = this.$mp.query.realId;
    // this.productId = this.$mp.query.productId;
  },
  watch: {},
  methods: {
    info() {
      this.productClassifyAll();
      this.allLimit();
      this.allStarting();
      this.customerPages();
    },
    /** 产品分页 */
    async customerPages() {
      if (this.loadMore) {
        wx.showLoading({
          title: "加载中",
          mask: true
        });
        await customerPages(this.formData).then(res => {
          wx.hideLoading();
          if (!res.code) {
            var data = res.list;
            this.list = this.list.concat(data);
            ++this.formData.pageIndex;
            if (res.pages < this.formData.pageIndex) {
              this.loadMore = false;
            }
          }
        });
      }
    },
    /** 所有起投 */
    async allStarting() {
      await allStarting().then(res => {
        this.showList3 = this.showList3.concat(res);
        console.log(this.showList3);
      });
    },
    /** 所有期限 */
    async allLimit() {
      await allLimit().then(res => {
        this.showList2 = this.showList2.concat(res);
        console.log(this.showList2);
      });
    },
    /** 所有产品分类 */
    async productClassifyAll() {
      await productClassifyAll().then(res => {
        this.showList1 = this.showList1.concat(res);
        console.log(this.showList1);
      });
    },
    /** 判断用户是否实名认证和风险测评 */
    // info () {
    //   if (this.userInfo) {

    //   }
    // },
    /** 搜索 */
    search(e) {
      this.show1 = { index: 0, classifyId: "" };
      this.show2 = { index: 0, raisingPeriod: "" };
      this.show3 = { index: 0, startingAmount: "" };
      this.show4 = { index: 0, auditStatus: "" };
      this.list = [];
      this.formData.queryStringPram = e.mp.detail;
      this.loadMore = true;
      this.formData.pageIndex = 1;
      this.customerPages();
      console.log(e);
    },
    /** 取消 */
    cancel() {
      console.log(11111111111111);
      this.show1 = { index: 0, classifyId: "" };
      this.show2 = { index: 0, raisingPeriod: "" };
      this.show3 = { index: 0, startingAmount: "" };
      this.show4 = { index: 0, auditStatus: "" };
      this.list = [];
      this.formData.queryStringPram = "";
      this.loadMore = true;
      this.formData.pageIndex = 1;
      this.productPages();
    },
    /** 重置 */
    jumpAgain() {
      this.show1 = { index: 0, classifyId: "" };
      this.show2 = { index: 0, raisingPeriod: "" };
      this.show3 = { index: 0, startingAmount: "" };
      this.show4 = { index: 0, auditStatus: "" };
    },
    /** 确定 */
    jumpSucess() {
      if (this.show1.index !== 0) {
        this.formData.classifyId = this.show1.classifyId;
      } else {
        this.formData.classifyId = "";
      }
      if (this.show2.index !== 0) {
        this.formData.raisingPeriod = this.show2.raisingPeriod;
      } else {
        this.formData.raisingPeriod = "";
      }
      if (this.show3.index !== 0) {
        this.formData.startingAmount = this.show3.startingAmount;
      } else {
        this.formData.startingAmount = "";
      }
      if (this.show4.index !== 0) {
        this.formData.auditStatus = this.show4.auditStatus;
      } else {
        this.formData.auditStatus = "";
      }
      this.list = [];
      // this.formData.queryStringPram = e.mp.detail;
      this.loadMore = true;
      this.formData.pageIndex = 1;
      this.customerPages();
      console.log(this.show1, this.show2);
      this.screenType = false;
    },
    /** 跳转详情 */
    handleJump(item) {
      var baseComparison = "";
      if (item.baseComparison.length === 1) {
        baseComparison = item.baseComparison[0].prop + "%";
      } else {
        baseComparison =
          item.baseComparison[0].prop +
          "%~" +
          // eslint-disable-next-line standard/computed-property-even-spacing
          item.baseComparison[item.baseComparison.length - 1].prop +
          "%";
      }
      wx.navigateTo({
        url: `/pages/money/children/buy/main?productId=${item.id}&customerId=${
          this.formData.realId
        }&phone=${this.phone}&customerName=${
          this.customerName
        }&baseComparison=${baseComparison}&name=${item.name}`
      });
    }
  }
};
</script>

<style scoped lang="less">
.manage {
  .shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
    padding: 15px 0 10px;
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  }
  .weight {
    padding-bottom: 12px;
    font-weight: bold;
  }
  .showColor {
    color: #187798;
    border: 1px solid #187798;
  }
  .showColor1 {
    border: 1px solid rgba(230, 231, 227, 1);
    color: #6b6b6b;
  }
  .screen {
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 59px;
    position: fixed;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    .show {
      border-top: 0.5px solid #e6e6e6;
      // max-height: 390px;
      background: #fff;
      // position: relative;
    }
    .type {
      flex-wrap: wrap;
      padding-left: 10px;

      .typeItem {
        width: 100px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        border-radius: 2px;
        font-size: 13px;
        margin: 0 14px 10px 5px;
      }
    }
    .btm {
      text-align: center;
      border-top: 0.5px solid #e6e6e6;
      height: 46px;
      line-height: 46px;
      .again {
        color: #020604;
        font-size: 15px;
        border-right: 0.5px solid #e6e6e6;
      }
      .sucess {
        color: #187798;
        font-size: 15px;
      }
    }
  }
  .search {
    padding-left: 15px;
    align-items: center;
    input {
      font-size: 13px;
      color: #b8bab9;
    }
    .searchMain {
      align-items: center;
      height: 34px;
      background: #f8f8f8;
      border-radius: 2px;
      line-height: 34px;
    }
    .search_icon {
      width: 15px;
      height: 15px;
      margin: 0 13px;
    }
    .right_icon {
      width: 13px;
      height: 14px;
      margin: 0 18px;
    }
  }
  .emptyIcon {
    width: 229px;
    height: 175px;
    margin: 135px 0 40px;
  }
  .content {
    margin-top: 70px;
    padding: 0 15px 10px;
    .right {
      border-left: 1px solid #e6e7e3;
      // padding-left: 25px;
      width: 40%;
      text-align: center;
    }

    .mainBody {
      padding: 20px 0;
      border-bottom: 0.5px solid #e6e6e6;
    }
    .percent {
      font-size: 21px;
      color: #f45247;
      font-weight: bold;
    }
    .month {
      font-size: 12px;
      color: #909292;
      margin-top: 8px;
    }
    .name {
      padding-right: 24px;
      margin: 6px 0 10px 0;
      font-size: 16px;
      font-weight: bold;
      color: #020604;
    }
    .label {
      padding: 2px 10px;
      background: #f3f7f8;
      border-radius: 2px;
      color: #187798;
      font-size: 12px;
      margin-right: 5px;
    }
    .icon {
      background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/collect.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 51px;
      height: 20px;
      font-size: 10px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      position: relative;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 51px;
        height: 20px;
      }
      span {
        color: #fff;
        position: absolute;
        left: 6px;
      }

      // background-size: 100% 100%;
    }
  }
}
</style>
